<template>
  <div class="signerinfo">
    <div class="intro" v-for="(item, index) in singerIntro" :key="index">
      <h3>{{ item.ti }}</h3>
      <pre>{{ item.txt }}</pre>
    </div>
  </div>
</template>

<script>
import { getSingerIntro } from '../../../network/singer.js'
export default {
  props: ['id'],
  data () {
    return {
      singerIntro: []
    }
  },
  methods: {
    getSingerIntro (id) {
      getSingerIntro(id).then(res => {
        // console.log(res.data)
        this.singerIntro = res.data.introduction
      })
    }
  },
  created () {
    this.getSingerIntro(this.id)
  }
}
</script>

<style lang="less" scoped>
  .signerinfo {
    width: 100%;
    margin: 20px auto;
    .intro {
      width: 100%;
      h3 {
        margin: 10px auto;
      }
      pre {
        white-space: pre-wrap;
        text-indent: 2em;
        line-height: 30px;
      }
    }
  }
</style>
